<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Symbol species</title>
</head>

<body>
  <script>
    class MyCollection {
      constructor(items = []) {
        this.items = items
      }
      static get [Symbol.species]() {
        return MyCollection
      }
      map(callback) {
        const newItems = this.items.map(callback)
        return new this.constructor(newItems)
      }
    }
    const collectionA = new MyCollection([1, 2, 3])
    const collectionB = collectionA.map(item => item * 2)
    console.log(collectionA)
    console.log(collectionB)
  </script>
</body>

</html>